<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
    <style>
        .row{
            margin: 15px;
        }
    </style>
    <title>天气预报</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-7 text-center">
                <h3 th:text="${title}"></h3>
            </div>
        </div>

            <div class="row">
                <div class="col-md-1 text-center" th:style="'text-align:center'">
                    <label for="province" >省</label>
                </div>
                <div class="col-md-5" >
                    <select class="form-control" name="province" id="province">
                        <option>请选择</option>
                        <option th:each="province : ${provinceList}" th:value="${province.provinceName}"
                                th:text="${province.provinceName}"
                                th:selected="${province.cityName eq cityName }"></option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 text-center">
                    <label for="city" >市/区</label>
                </div>
                <div class="col-md-5">
                    <select class="form-control" name="city" id="city">
                        <option>请选择</option>
                        <option th:each="city : ${cityList}" th:value="${city.cityName}"
                                th:text="${city.cityName}"
                                th:selected="${city.cityName eq cityName }"></option>
                    </select>
                </div>
            </div>
            <div class="list" th:fragment="div1" id="div1">
                <div class="row">
                    <div class="text-center col-md-7">
                        <h1 class="text-success" th:text="${cityName}">城市名称</h1>
                    </div>

                </div>
                <div class="row">
                    <div class="text-center col-md-7">
                        <p>
                            当前温度：
                            <span th:text="${report.wendu}" class="wendu"></span>'C
                        </p>
                    </div>
                </div>
                <div class="row">
                    <p>
                        温馨提示：
                        <span th:text="${report.ganmao }" class="ganmao"></span>
                    </p>
                </div>
                <div class="row">
                    <div class="card border-info" th:each="forecast : ${report.forecast}">
                        <div class="card-body text-info">
                            <p class="card-text" th:text="${forecast.date}">
                                日期
                            </p>
                            <p class="card-text" th:text="${forecast.type}">
                                天气类型
                            </p>
                            <p class="card-text" th:text="${forecast.high}">
                                最高温度
                            </p>
                            <p class="card-text" th:text="${forecast.low}">
                                最低温度
                            </p>
                            <p class="card-text" th:text="${forecast.fengxiang}">
                                风向
                            </p>
                        </div>
                    </div>
                </div>
           </div>

    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" ></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

    <script>
        //级联
        $("#province").change(function (){
          var province = $("#province").val();
          if(province == ""){
            return ;
          }
          var url = "/weather/city/list/"+province;
          jQuery.get(url,function (data) {
            var  result= JSON.parse(data);
            var citySelect = $("#city").empty();
            citySelect.append(`<option >请选择</option>`)
            jQuery.each(result,function(i,city){
              citySelect.append("<option value="+city.cityName+">"+ city.cityName+"</option>");
            })
          })
        })
      //市区改变天气显示信息
        $("#city").change(function () {
          var cityName = $("#city").val();
          var url = "/weather/cityName/" + cityName;
          $("#div1").load(url);
        })

    </script>

</body>
</html>